import React, { Component } from 'react'
import Header from '../../components/header/header'
import { reqcartdelete, reqcartedit, reqcartlist } from '../../http/api'
import "./Shop.less"
import { SwipeAction } from 'antd-mobile'
import { Toast } from 'antd-mobile'
import { MyContext } from '../../App'

export default class Shop extends Component {
  constructor() {
    super()
    this.state = {
      info: [],
      //总价
      allprice: 0,
      //定义一个变量
      isshow: true,
      //全选
      allPricee: false
    }
  }
  UNSAFE_componentWillMount() {
    //获取购物车
    this.reqList();
    //总价
  }

  //获取购物车
  reqList = () => {
    let uid = JSON.parse(sessionStorage.getItem("info")).uid
    reqcartlist({ uid }).then(res => {
      if (res.data.code == 200) {
        res.data.list[1].content.forEach(item => {
          item.checked = false
        });
        // console.log(res);
        this.setState({
          info: res.data.list[1].content ? res.data.list[1].content : [],
          isshow: true
        })

      }
    })
  }
  //加减
  reqNumjj = (e, index, type) => {
    //判断书不是true
    if (!this.state.isshow) {
      return
    }
    //判断num大小
    if (Number(e.info[index].num) <= 1 && type == 1) {
      return;
    }
    console.log(e);
    this.setState({
      isshow: false
    })
    let id = e.info[index].id
    let authorization = JSON.parse(sessionStorage.getItem("info")).token
    reqcartedit({ id, type, authorization }).then(res => {
      if (res.data.code == 200) {
        console.log(res);
        //重新获取数据
        this.reqList()
      }
    })
  }
  //删除
  reqDelete = (e, index) => {
    let id = e.info[index.key.index].id
    console.log(e);
    reqcartdelete({ id }).then(res => {
      if (res.data.code == 200) {
        Toast.show({
          content: res.data.msg
        })
      }
    })
    //删除成功在请求数据
    this.reqList();
  }
  //点了一个
  reqChecked = (e, index, val) => {
    let info = this.state.info
    info[index].checked = !info[index].checked
    this.setState({
      info,
      allPricee: info.every((item) => item.checked)
    })
    console.log(this.state.info);
  }
  //全选
  reqallprice = (e) => {
    this.setState(({
      allPricee: this.state.info.every((item) => item.checked = e)
    }))
  }
  
  render() {
    let { info, allprice } = this.state
    let priceall = 0;
    let allPricee = this.state.info.reduce(
      (val, item) => (item.checked ? val + item.price * item.num : val),
      0
    );
    priceall = allPricee
    return (
      <div className='shop'>
        <Header text="购物车"></Header>
        <div className='con'>
          <p>全选：<input type="checkbox" checked={this.state.allPricee} onChange={() => { }} /><span>总价：{priceall.toFixed(2)}</span></p>

          {info.length > 0 ? (
            <div>
              {info.map((item, index) => {
                return (
                  <MyContext.Consumer key={index}>
                    {({ $pre }) => {
                      return (
                        <SwipeAction
                          key={index}
                          onAction={(e) => { this.reqDelete(this.state, e) }}
                          rightActions={[
                            {
                              key: { index },
                              text: '删除',
                              color: 'danger',
                            },
                          ]}
                        >
                          <div style={{ padding: 12 }} className="kapian" >
                            <input type="checkbox" onChange={(e) => this.reqChecked(this.state, index, e.target.checked)} checked={item.checked} />
                            <img src={$pre + item.img} alt="" width={90} />
                            <div>
                              <p>{item.goodsname}</p>
                              <p>{item.price}</p>
                            </div>
                            <div><button onClick={(e) => this.reqNumjj(this.state, index, 1)}>-</button>{item.num}<button onClick={(e) => this.reqNumjj(this.state, index, 2)}>+</button></div>
                          </div>
                        </SwipeAction>
                      )
                    }}
                  </MyContext.Consumer>
                )
              })}
            </div>
          ) : null}
        </div>
      </div>
    )
  }
}
